<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>进销存管理系统</title>
    <link href="{{ctx}}/imgs/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link href="{{ctx}}/js/iceui/ui/ui.css" rel="stylesheet" type="text/css" />
    <link href="{{ctx}}/js/iceui/admin/iceAdmin.css" rel="stylesheet" type="text/css" />
    <script src="{{ctx}}/js/iceui/ice.js" type="text/javascript"></script>
    <script src="{{ctx}}/js/iceui/ui/ui.js" type="text/javascript"></script>

    <style type="text/css">
        html {
            font-size: 10px;
        }
        
        body {
            background-color: #ffdab9;
        }

        .admin-toggle {
            float: right;
        }

        .logo {
            position: absolute;
            height: 4rem;
            line-height: 4rem;
            color: #FF6A6A;
            font-size: x-large;
            margin-left: 2rem;
            font-family: KaiTi;
            font-weight: 900;
        }

        .admin-sidebar-menu a::after {
            border-right: 0px solid #ffdab9;
        }
        
        .admin-sidebar-menu li.iceui-this a {
            background-color: #009688;
            color: #fff;
        }

        .group-form>.group-label {
            width: 9rem;
        }

        .table tr th {
            background-color: lightblue;
        }
        
        .table tr th,
        .table tr td {
            height: 4rem;
            line-height: 4rem;
            text-align: center;
            vertical-align: middle;
            border: 1px solid gray;
        }
        
        .paging a:hover {
            border-radius: 50%;
        }
    </style>
    {% block css -%}{% endblock css -%}
</head>

<body>
    <div class="admin-page">
        <!-- 顶部 -->
        <div class="admin-header">
            <!-- logo -->
            <div class="admin-logo">
                <div class="admin-toggle-right"><span></span></div>
                <div class="admin-toggle"><span></span></div>
            </div>

            <div class="admin-menu">
                <!-- 顶部左侧菜单 -->
                <div class="admin-menu-left">
                    <div class="logo">高铁动车销售大数据综合办公平台</div>
                </div>

                <!-- 顶部右侧菜单 -->
                <div class="admin-menu-right">
                    <a href="javascript:quit();">
                        <i class="icon ice-exit"></i>
                        <span class="title">退出</span>
                    </a>
                </div>
            </div>
        </div>
        <!-- 主要 -->
        <div class="admin-main">
            <!-- 侧栏 -->
            <div class="admin-sidebar">
                <ul id="tree" class="admin-sidebar-menu">
                    {% if flag == 1 -%}
                    {% for parent in menus -%}
                    {% if parent.types == "1" -%}
                    {% set parentId = parent.id -%}
                    <li id="menu{{parentId}}">
                        {% if parent.url == "#" -%}
                        <a href="javascript:clickMenu('menu{{parentId}}', '#');">
                            <i class="icon {{parent.class}}"></i>
                            <span class="title">{{parent.name}}</span>
                            <span class="arrow"><i class="icon ice-arrow-line-r"></i></span>
                        </a>
                        <ul class="admin-menu-dropdown">
                            {% for son in menus -%}
                            {% if son.types == "2" and son.parentId == parentId -%}
                            <li id="menu{{son.id}}">
                                <a href="{{ctx}}{{son.url}}"
                                    onclick="clickSubMenu('menu{{parentId}}','menu{{son.id}}')">
                                    <i class="icon {{son.class}}"></i>
                                    <span class="title">{{son.name}}</span>
                                </a>
                            </li>
                            {% endif -%}
                            {% endfor -%}
                        </ul>
                        {% else -%}
                        <a href="javascript:clickMenu('menu{{parentId}}', '{{parent.url}}');">
                            <i class="icon {{parent.class}}"></i>
                            <span class="title">{{parent.name}}</span>
                        </a>
                        {% endif -%}
                    </li>
                    {% endif -%}
                    {% endfor -%}
                    {% endif -%}
                </ul>
            </div>
            <!-- 内容 -->
            <div class="admin-content">
                {% block content -%}{% endblock content -%}
            </div>
        </div>
    </div>

    <script type="text/javascript">
        ice(function(){
            var sidebarOpen = sessionStorage.getItem('admin-sidebar') ? sessionStorage.getItem('admin-sidebar') : 'open';
            //获取页面对象
            var sidebar = ice('.admin-sidebar')[0];
            var page = ice('.admin-page')[0];
            var logo = ice('.admin-logo')[0];

            //内容板块自适应屏幕高度
            var sidebarH = sidebar.offsetHeight;
            var headerH = ice('.admin-header')[0].offsetHeight;
            var contentH = ice.web().h - headerH;
            contentH = contentH < sidebarH ? sidebarH - headerH : contentH;
            ice('.admin-content')[0].style.minHeight = contentH + 'px';

            if (sidebarOpen == 'close') {
                if (ice.web().w > 768) {
                    logo.style.width = '48px';
                }
                ice.addCss(page, 'admin-sidebar-close');
                ice.addCss(sidebar, 'close');
                ice('.admin-toggle').addCss('open');
            }

            //侧栏隐藏展开-收缩
            ice('.admin-toggle')[0].onclick = function () {
                ice.toggleCss(this, 'open', 'close', function () {
                    if (ice.web().w > 768) {
                        logo.style.width = '48px';
                        sessionStorage.setItem('admin-sidebar', 'close');
                    }
                }, function () {
                    logo.style.width = '';
                    sessionStorage.setItem('admin-sidebar', 'open');
                });
                ice.toggleCss(page, 'admin-sidebar-close');
                ice.toggleCss(sidebar, 'open', 'close');
            }

            //侧栏菜单隐藏展开-收缩
            ice('.admin-toggle-right')[0].onclick = function () {
                ice('.admin-menu').toggleCss('open', 'close');
                ice.toggleCss(this, 'open');
            }

            //侧栏菜单展开-收缩
            ice.use('tree', function () {
                ice.tree({
                    id: 'tree',
                    func: function (e) {
                        var p = e.parentNode;
                        if (p.parentNode.className == 'admin-sidebar-menu') {
                            if (p.className == 'active') {
                                p.className = '';
                            } else {
                                var li = ice('.active');
                                if (li.length == 1) {
                                    ice.delCss(li, 'active');
                                    var a = ice('a', li)[0];
                                    a.className = 'close';
                                    var ul = ice('ul', li)[0];
                                    ice.css(ul, 'display', 'none');
                                    ice.attr(ul, 'ice-slide', 'display: block;');
                                }
                                p.className = 'active';
                            }
                        }
                    }
                });
            });

            //刷新显示重新赋权后的菜单
            if (sessionStorage.getItem('changeAuth') == 'true') {
                sessionStorage.removeItem('changeAuth');
                location.reload();
            }

            //美化所有下拉框
            iceui.diyAllSel();
        });

        function quit() {
            location.href = '{{ctx}}/quit.html';
        }

        function clickMenu(parentId, url) {
            var selectId = sessionStorage.getItem('selectId');
            if (selectId != parentId) {
                sessionStorage.setItem('selectId', parentId);
            }
            if (url != '#') {
                sessionStorage.setItem('sonId', parentId);
                location.href = '{{ctx}}' + url;
            }
        }

        function clickSubMenu(parentId, sonId) {
            sessionStorage.setItem('selectId', parentId);
            sessionStorage.setItem('sonId', sonId);
        }
        
        function bool(val) {
            return val == 'true';
        }
    </script>
    {% if flag == 1 -%}
    <script type="text/javascript">
        sessionStorage.setItem('menus', '');
        iceui.post('{{ctx}}/ajaxMenu.html', {}, function (data) {
            if (data.code == '20') {
                sessionStorage.setItem('menus', ice('#tree').html());
                var selectId = sessionStorage.getItem('selectId');
                if (selectId == null) {
                    var li = ice('#tree').children('li')[0];
                    ice.addCss(li, 'active');
                    var a = ice('a', li)[0];
                    a.className = 'open';
                    var ul = ice('ul', li)[0];
                    ice.css(ul, 'display', 'block');
                    sessionStorage.setItem('selectId', ice(li).attr('id'));
                } else {
                    var li = ice('#' + sessionStorage.getItem('selectId'));
                    ice.addCss(li, 'active');
                    var a = ice('a', li)[0];
                    a.className = 'open';
                    var ul = ice('ul', li)[0];
                    ice.css(ul, 'display', 'block');
                    ice('#' + sessionStorage.getItem('sonId')).addCss('iceui-this');
                }
            }
        });
    </script>
    {% else -%}
    <script type="text/javascript">
        ice('#tree').html(sessionStorage.getItem('menus'));
        ice(function(){
            var li = ice('#' + sessionStorage.getItem('selectId'));
            ice.addCss(li, 'active');
            var a = ice('a', li)[0];
            a.className = 'open';
            var ul = ice('ul', li)[0];
            ice.css(ul, 'display', 'block');
            ice('#' + sessionStorage.getItem('sonId')).addCss('iceui-this');
        });
    </script>
    {% endif -%}
</body>

</html>